<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/mainLayout.xhtml">

    <ui:define name="title">Tạo mới role</ui:define>
    <ui:define name="idleMonitor">
        <h:form id="monitorForm" prependId="false">
            <p:idleMonitor timeout="#{roleBean.conversation.getTimeout()}" onidle="idleDialog.show();" 
                           onactive='window.location = "list.jsf";' rendered="#{!roleBean.conversation.isTransient()}"/>

            <p:dialog header="Thông báo" resizable="false" widgetVar="idleDialog" modal="true" width="400">
                <h:outputText value="Phiên làm việc trên trang này đã hết hạn" />
            </p:dialog>
        </h:form>
    </ui:define>
    <ui:define name="content">
        <style type="text/css">
            .colStyle1 {
                vertical-align: top;
                width: 20%;
            }
            .colStyle2 {
                vertical-align: top;
            }
        </style>
        <f:metadata>
            <f:event type="preRenderView" listener="#{roleBean.preNewAction()}" />
        </f:metadata>
        <h:form id="mainForm">
            <h:panelGrid columns="2" cellpadding="5" width="100%" columnClasses="colStyle1, colStyle2">
                <ui:include src="/templates/menu.xhtml"/>

                <p:panel header="Tạo mới role người dùng">
                    <p:messages id="msgs"/>
                    <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                        <p:toolbarGroup align="left">  
                            <p:commandButton value="Lưu" action="#{roleBean.saveAction()}" update="mainForm"/>
                            <p:commandButton value="Hủy" action="#{roleBean.cancelAction()}" immediate="true"/>
                            <p:commandButton type="reset" value="Nhập lại"/>
                        </p:toolbarGroup>
                        <p:toolbarGroup align="right">  
                            <p:menuButton value="Chuyển trang">  
                                <p:menuitem value="Trang chủ" url="/home.jsf" />  
                                <p:menuitem value="Danh sách role" url="list.jsf" />
                            </p:menuButton>
                        </p:toolbarGroup>
                    </p:toolbar>

                    <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content" 
                                 columns="2" cellpadding="5" width="100%">  
                        <h:outputLabel for="name" style="display: inline; float: right; padding-right: 5px;" value="Tên role *" />  
                        <p:inputText value="#{roleBean.role.name}" id="name" required="true" label="Tên role" maxlength="25"
                                     requiredMessage="Yêu cầu nhập tên role"/>

                        <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Mã" />
                        <p:selectOneMenu value="#{roleBean.role.code}" effect="fade">  
                            <f:selectItems value="#{roleBean.roleCodes}" var="role" itemLabel="#{role.toString()}" itemValue="#{role}"/>  
                        </p:selectOneMenu>

                        <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Mô tả" />
                        <p:inputTextarea style="width:50%; height:100px;" value="#{roleBean.role.description}" maxlength="200"/>

                        <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Trang" />
                        <p:pickList value="#{roleBean.pageModels}" var="page" itemLabel="#{page.name}" 
                                    itemValue="#{page}" converter="pageConverter"
                                    showSourceControls="true" showTargetControls="true">
                            <f:facet name="sourceCaption">Danh sách trang</f:facet>  
                            <f:facet name="targetCaption">Trang đã chọn</f:facet>
                        </p:pickList>
                    </h:panelGrid>

                    <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                        <p:toolbarGroup align="left">  
                            <p:commandButton value="Lưu" action="#{roleBean.saveAction()}" update="mainForm"/>
                            <p:commandButton value="Hủy" action="#{roleBean.cancelAction()}" immediate="true"/>
                            <p:commandButton type="reset" value="Nhập lại"/>
                        </p:toolbarGroup>
                        <p:toolbarGroup align="right">  
                            <p:menuButton value="Chuyển trang">  
                                <p:menuitem value="Trang chủ" url="/home.jsf" />  
                                <p:menuitem value="Danh sách role" url="list.jsf" />
                            </p:menuButton>
                        </p:toolbarGroup>
                    </p:toolbar>
                </p:panel>
            </h:panelGrid>
        </h:form>
    </ui:define>
</ui:composition>